<script setup>
	// 导入生命周期方法
	import { onMounted, ref } from 'vue'

	import userApi from '@/apis/user.js'

	// 1. 定义响应式数据用来接收服务器的数据
	const userProfile = ref({})
	const taskInfo = ref({})

	onMounted(() => {
		getUserProfile() // 获取用户的信息
		getTaskInfo() // 获取任务信息
	})

	async function getUserProfile() {
		// 2. 请求服务器数据
		let { data } = await userApi.profile()
		userProfile.value = data
	}

	async function getTaskInfo() {
		// 2. 请求服务器数据
		let { data } = await userApi.task('2024', '7')
		taskInfo.value = data
	}
</script>

<template>
	<view class="page-container">
		<view class="user-profile">
			<image class="avatar" :src="userProfile.avatar" mode=""></image>
			<text class="username">{{ userProfile.name }}</text>
			<text class="no">司机编号：{{ userProfile.number }}</text>
			<text class="mobile">手机号码：{{ userProfile.phone }}</text>
		</view>
		<view class="month-overview">
			<view class="title">我的任务</view>
			<view class="content">
				<view class="item">
					<text class="volumn">{{ taskInfo.taskAmounts }}</text>
					<text class="label">任务总量</text>
				</view>
				<view class="item">
					<text class="volumn">{{ taskInfo.completedAmounts }}</text>
					<text class="label">完成任务量</text>
				</view>
				<view class="item">
					<text class="volumn">{{ taskInfo.transportMileage }}</text>
					<text class="label">运输里程(km)</text>
				</view>
			</view>
		</view>
		<view class="entry-list">
			<uni-list :border="false">
				<uni-list-item
					to="/subpkg_user/truck/index"
					showArrow
					title="车辆信息"
				/>
				<uni-list-item
					to="/subpkg_user/task/index"
					showArrow
					title="任务数据"
				/>
				<uni-list-item
					to="/subpkg_user/settings/index"
					showArrow
					title="系统设置"
				/>
			</uni-list>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>
